<template>
	<hr class="two" />
	<h2>==== Provide 类似全局事件总线 ===</h2>

	<div class="app">
		<h3>我是App组件（祖），{{ name }}--{{ price }}</h3>
		<button @click="changeCarInfo">修改 car</button>

		<Child />

	</div>
</template>

<script>
import {reactive, toRefs, provide, readonly} from 'vue'
import Child from './Child.vue'

export default {
	name: 'Provide',
	components: {Child},
	setup() {
		let car = reactive({name: '奔驰', price: 12})

		function changeCarInfo() {
			// car = readonly(car) //做限制

			car.name = 'console'
			car.price++ // 与祖 传来的 car 是同一对象

			console.log('Son changeCarInfo', car)
		}

		provide('car', car) //给自己的后代组件传递数据 /消息订阅/全局事件总线


		// 大白话:toRef(s)就是方便我们把响应式数据(ref,reactive)展开丢出去，方便在模版中应用
		return {
			...toRefs(car), changeCarInfo
		}
	}
}
</script>

<style>
.app {
	background-color: gray;
	padding: 10px;
}
</style>